<template>
  <Header></Header>
  <div style="padding: 20px; min-height: 800px; width: 1200px; margin: 0 auto">
    <h1 style="text-align: center; padding: 10px 0;">发布文章</h1>
      <el-form
        :model="article"
        :rules="rules"
        ref="articleForm"
        label-width="120px"
      >
        <el-form-item label="标题" prop="title">
          <el-input
            v-model="article.title"
            placeholder="输入输入标题"
            style="margin-top: 5px"
          />
        </el-form-item>
        <el-form-item label="标签" prop="blogTags">
          <el-select
            v-model="article.webTags"
            multiple
            filterable
            allow-create
            default-first-option
            :reserve-keyword="false"
            placeholder="请选择标签"
            style="width: 240px"
          >
            <el-option
              v-for="item in tagOptions"
              :key="item.id"
              :label="item.name"
              :value="JSON.stringify({ id: item.id, name: item.name })"
            />
          </el-select>
        </el-form-item>
        <!-- More form items... -->
        <el-form-item label="内容" prop="content">
          <AiEditor :disabled="false" v-model="article.content" />
        </el-form-item>
        <el-form-item label="摘要" prop="summary">
          <el-input v-model="article.summary" type="textarea" />
        </el-form-item>
        <el-form-item label="图片">
          <el-upload
            class="upload-demo"
            drag
            action="http://117.72.35.196:8848/common/upload"
            method="post"
            name="file"
            :headers="headers"
            multiple
            v-on:success="handleSuccess"
          >
            <el-icon class="el-icon--upload"><upload-filled /></el-icon>
            <div class="el-upload__text">
              Drop file here or <em>click to upload</em>
            </div>
            <template #tip>
              <div class="el-upload__tip">
                jpg/png files with a size less than 500kb
              </div>
            </template>
          </el-upload>
        </el-form-item>
        <el-form-item label="允许评论">
          <el-switch v-model="article.isComment" />
        </el-form-item>
        <el-form-item label="请输入密码" prop="password">
          <el-input v-model="article.password" type="text" />
        </el-form-item>
        <!-- Add more form items as needed -->
        <el-form-item>
          <el-button type="primary" @click="submitArticle">提交</el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
  </div>
  <!-- 底部 -->
  <Footer></Footer>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from "vue";
import { ElMessage } from "element-plus";
import { pushActivity, PushActivityParams, queryTagList } from "@/api/article";
import useUserStore from "@/stores/user";
import { useRouter } from "vue-router";

const router = useRouter();

const userStore = useUserStore();
const headers = {
  token: userStore.userInfo.token,
};
const handleSuccess = (res: any) => {
  article.imagrUrl = res.url;
};
const tagOptions = ref<any>([]);
const article = reactive<PushActivityParams>({
  blogTags: [],
  content: "",
  id: "",
  imagrUrl: "",
  isComment: "true",
  isDel: "",
  isTop: "1",
  password: "",
  pushTime: "",
  status: "",
  summary: "",
  title: "",
  viewCount: 0,
  webTags: [],
});

const rules = reactive({
  title: [{ required: true, message: "请输入标题", trigger: "blur" }],
  content: [{ required: true, message: "请输入内容", trigger: "blur" }],
  summary: [{ required: true, message: "请输入摘要", trigger: "blur" }],
  blogTags: [{ required: true, message: "请选择标签", trigger: "blur" }],
  password: [{ required: true, message: "请输入密码", trigger: "blur" }],
});

const articleForm = ref();

const fetchTags = async () => {
  const { data } = await queryTagList();
  tagOptions.value = data.data;
};

const submitArticle = async () => {
  let arr: object[] = [];
  article.webTags?.forEach((item) => {
    try {
      let obj = JSON.parse(item as string);
      arr.push(obj);
    } catch (error) {
      arr.push({ id: null, name: item });
    }
  });
  article.webTags = arr;
  article.isComment = article.isComment ? "1" : "0";
  try {
    await pushActivity(article);
    ElMessage.success("文章发布成功");
    // 跳回 文章页面
    router.push("/article");
    resetForm();
  } catch (error) {
    console.error(error);
    ElMessage.error("文章发布失败");
  }
};

const resetForm = () => {
  articleForm.value.resetFields();
};

onMounted(() => {
  fetchTags();
});
</script>
